import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'ProfileLogic.dart';
import '../../services/ring_service.dart';
import '../../core/controllers/ring_controller.dart';
import '../../gen/assets.gen.dart';

/// 个人页面
class ProfileView extends GetView<ProfileLogic> {
  const ProfileView({super.key});

  // 获取戒指控制器
  RingController get ringLogic => Get.find<RingController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          // 顶部渐变背景
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Assets.profile.profileBcg.image(
              fit: BoxFit.cover,
              height: 300.h,
            ),
          ),
          SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  _buildHeader(),
                  SizedBox(height: 20.h),
                  _buildDeviceCard(),
                  SizedBox(height: 20.h),
                  _buildSectionCard('亲友圈', Assets.profile.group),
                  SizedBox(height: 30.h),
                  _buildSimpleSection('积分商城'),
                  SizedBox(height: 30.h),
                  _buildSimpleSection('勋章墙'),
                  SizedBox(height: 40.h),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHeader() {
    return Container(
      padding: EdgeInsets.all(20.w),
      child: Row(
        children: [
          // 用户头像和信息
          Expanded(
            child: Row(
              children: [
                Obx(() => CircleAvatar(
                      radius: 25.r,
                      backgroundColor: Colors.grey[800],
                      backgroundImage: controller.state.avatar.value.isNotEmpty
                          ? NetworkImage(controller.state.avatar.value)
                          : null,
                      child: controller.state.avatar.value.isEmpty
                          ? Icon(
                              Icons.person,
                              size: 30.sp,
                              color: Colors.grey[300],
                            )
                          : null,
                    )),
                SizedBox(width: 12.w),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Obx(() => Text(
                            controller.state.username.value,
                            style: TextStyle(
                              fontSize: 18.sp,
                              fontWeight: FontWeight.w600,
                              color: Colors.white,
                            ),
                          )),
                      SizedBox(height: 4.h),
                      Text(
                        '0枚 勋章',
                        style: TextStyle(
                          fontSize: 14.sp,
                          color: Colors.grey[400],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          // 右上角图标
          Row(
            children: [
              GestureDetector(
                onTap: () {
                  // 跳转到消息中心
                  Get.toNamed('/message-center');
                },
                child: Assets.profile.messageNodata.image(
                  width: 24.w,
                  height: 24.w,
                ),
              ),
              SizedBox(width: 20.w),
              GestureDetector(
                onTap: () {
                  // 跳转到设置页面
                  Get.toNamed('/settings');
                },
                child: Assets.profile.settings.image(
                  width: 24.w,
                  height: 24.w,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildDeviceCard() {
    return Obx(() {
      final connectedDevice = ringLogic.connectedDevice;
      final connectionState = ringLogic.connectionState;
      final battery = ringLogic.battery;

      // 如果有设备（无论连接状态如何）或正在连接，显示设备信息
      if (connectedDevice != null ||
          connectionState == RingConnectionState.connecting) {
        return _buildConnectedDeviceCard(connectedDevice, battery);
      }

      // 没有设备且未连接时显示添加设备按钮
      return _buildAddDeviceCard();
    });
  }

  Widget _buildAddDeviceCard() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20.w),
      height: 387.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.3),
            spreadRadius: 2,
            blurRadius: 8,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20.r),
        child: Stack(
          children: [
            // 背景图
            Assets.profile.deviceBcg.image(
              fit: BoxFit.cover,
              width: double.infinity,
              height: 387.h,
            ),
            Center(
              child: Padding(
                padding: EdgeInsets.all(24.w),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      '添加智能戒指以获取更多健康数据！',
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w600,
                        color: Colors.white,
                      ),
                      textAlign: TextAlign.center,
                    ),
                    SizedBox(height: 24.h),
                    GestureDetector(
                      onTap: _navigateToBluetoothScan,
                      child: Container(
                        padding: EdgeInsets.symmetric(
                            horizontal: 32.w, vertical: 14.h),
                        decoration: BoxDecoration(
                          color: const Color(0xFFF46425),
                          borderRadius: BorderRadius.circular(25.r),
                        ),
                        child: Text(
                          '添加设备',
                          style: TextStyle(
                            fontSize: 14.sp,
                            color: Colors.white,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildConnectedDeviceCard(RingDevice? device, int battery) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20.w),
      height: 387.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.3),
            spreadRadius: 2,
            blurRadius: 8,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20.r),
        child: Stack(
          children: [
            // 背景图
            Assets.profile.deviceBcg.image(
              fit: BoxFit.cover,
              width: double.infinity,
              height: 387.h,
            ),
            Center(
              child: Padding(
                padding: EdgeInsets.all(24.w),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    // 戒指图片 - 根据颜色显示
                    _getRingImage(device?.deviceColor).image(
                      width: 121.w,
                      height: 123.w,
                    ),
                    SizedBox(height: 18.h),

                    // 连接状态和电量
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        // 蓝牙连接状态
                        Obx(() {
                          final connectionState = ringLogic.connectionState;
                          return Row(
                            children: [
                              Assets.profile.ble.image(
                                width: 16.w,
                                height: 16.w,
                              ),
                              SizedBox(width: 4.w),
                              Text(
                                connectionState == RingConnectionState.connected
                                    ? '已连接'
                                    : connectionState ==
                                            RingConnectionState.connecting
                                        ? '连接中'
                                        : '已断开',
                                style: TextStyle(
                                  fontSize: 12.sp,
                                  color: Colors.white,
                                ),
                              ),
                            ],
                          );
                        }),
                        SizedBox(width: 24.w),
                        // 电池电量
                        Obx(() {
                          final actualBattery = ringLogic.battery;
                          final isCharging = ringLogic.isCharging;
                          final connectionState = ringLogic.connectionState;

                          if (connectionState ==
                              RingConnectionState.connecting) {
                            return Row(
                              children: [
                                Icon(
                                  Icons.battery_unknown,
                                  size: 16.sp,
                                  color: Colors.white,
                                ),
                                SizedBox(width: 4.w),
                                Text(
                                  '--',
                                  style: TextStyle(
                                    fontSize: 12.sp,
                                    color: Colors.white,
                                  ),
                                ),
                              ],
                            );
                          }

                          // 使用 RingService 中已经解析好的电量和充电状态
                          return Row(
                            children: [
                              // 充电中显示动画图标
                              if (isCharging)
                                _buildChargingIcon(actualBattery)
                              else
                                Icon(
                                  _getBatteryIcon(actualBattery, isCharging),
                                  size: 16.sp,
                                  color: _getBatteryColor(
                                      actualBattery, isCharging),
                                ),
                              SizedBox(width: 4.w),
                              Text(
                                '${actualBattery}%',
                                style: TextStyle(
                                  fontSize: 12.sp,
                                  color: _getBatteryColor(
                                      actualBattery, isCharging),
                                ),
                              ),
                            ],
                          );
                        }),
                      ],
                    ),
                    SizedBox(height: 39.h),

                    // 设备名称
                    Text(
                      device?.name.isNotEmpty == true
                          ? device!.name
                          : (device != null ? 'Az Ring' : '正在连接设备...'),
                      style: TextStyle(
                        fontSize: 24.sp,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                    SizedBox(height: 8.h),

                    // 设备地址
                    Text(
                      '蓝牙地址: ${device?.address ?? '获取地址中...'}',
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.grey[400],
                      ),
                    ),
                    SizedBox(height: 20.h),

                    // 移除设备按钮
                    GestureDetector(
                      onTap: _removeDevice,
                      child: Container(
                        padding: EdgeInsets.symmetric(
                            horizontal: 100.w, vertical: 14.h),
                        decoration: BoxDecoration(
                          color: const Color(0xFFED5C2F),
                          borderRadius: BorderRadius.circular(50.r),
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Assets.profile.deleteDevice.image(
                              width: 23.w,
                              height: 17.w,
                            ),
                            SizedBox(width: 8.w),
                            Text(
                              '移除设备',
                              style: TextStyle(
                                fontSize: 14.sp,
                                color: Colors.white,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  /// 导航到蓝牙扫描页面
  void _navigateToBluetoothScan() {
    Get.toNamed('/bluetooth-scan');
  }

  /// 根据颜色代码获取戒指图片
  AssetGenImage _getRingImage(String? colorCode) {
    if (colorCode == null) return Assets.profile.ringBlack;
    switch (colorCode) {
      case '0':
        return Assets.profile.ringBlack;
      case '2':
      case '3':
        return Assets.profile.ringGold;
      default:
        return Assets.profile.ringBlack;
    }
  }

  /// 移除设备
  void _removeDevice() {
    Get.dialog(
      AlertDialog(
        title: const Text('确认移除'),
        content: const Text('确定要移除当前连接的设备吗？'),
        actions: [
          TextButton(
            onPressed: () => Get.back(),
            child: const Text('取消'),
          ),
          ElevatedButton(
            onPressed: () async {
              Get.back();
              await ringLogic.disconnectDevice();
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.red,
            ),
            child: const Text(
              '移除',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建充电动画图标
  Widget _buildChargingIcon(int battery) {
    return _ChargingBatteryIcon(
      battery: battery,
      size: 16.sp,
    );
  }

  /// 获取电池图标
  IconData _getBatteryIcon(int battery, bool isCharging) {
    if (isCharging) return Icons.battery_charging_full; // 充电中显示充电图标
    if (battery >= 80) return Icons.battery_full;
    if (battery >= 60) return Icons.battery_5_bar;
    if (battery >= 40) return Icons.battery_4_bar;
    if (battery >= 20) return Icons.battery_2_bar;
    return Icons.battery_0_bar;
  }

  /// 获取电池颜色
  Color _getBatteryColor(int battery, bool isCharging) {
    if (isCharging) return Colors.green; // 充电中显示绿色
    if (battery >= 50) return Colors.green;
    if (battery >= 20) return Colors.orange;
    return Colors.red;
  }

  Widget _buildSectionCard(String title, AssetGenImage icon) {
    // 亲友圈特殊处理，显示群组列表和按钮
    if (title == '亲友圈') {
      return Obx(() {
        final hasGroups = controller.state.groupList.isNotEmpty;

        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 标题在外面
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              child: Text(
                title,
                style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
            ),
            SizedBox(height: 12.h),
            // 群组块容器
            Container(
              margin: EdgeInsets.symmetric(horizontal: 20.w),
              padding: EdgeInsets.all(20.w),
              decoration: BoxDecoration(
                color: const Color(0xFF030003),
                borderRadius: BorderRadius.circular(20.r),
                border: Border.all(
                  color: const Color(0xFF212121),
                  width: 1,
                ),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 群组数量和折叠图标
                  Row(
                    children: [
                      Text(
                        '群组${controller.state.groupList.length}个',
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: Colors.white,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      SizedBox(width: 12.w),
                      Icon(
                        Icons.keyboard_arrow_up,
                        color: Colors.grey[500],
                        size: 20.sp,
                      ),
                    ],
                  ),
                  SizedBox(height:13.h),
                  // 如果没有群组，显示空状态
                  if (!hasGroups) ...[
                    SizedBox(height: 20.h),
                    Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Assets.profile.group.image(
                            width: 110.w,
                            height: 110.w,
                          ),
                          SizedBox(height: 16.h),
                          Text(
                            '暂无家庭群组，点击下方按钮创建或加入群组',
                            style: TextStyle(
                              fontSize: 12.sp,
                              color: const Color(0xffD9D9D9),
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 20.h),
                  ],
                  // 群组卡片列表 - 可拖拽排序
                  if (hasGroups) ...[
                    ReorderableListView(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      onReorder: (oldIndex, newIndex) {
                        controller.reorderGroups(oldIndex, newIndex);
                      },
                      children: controller.state.groupList.map((group) {
                        return _buildGroupCard(group,
                            key: ValueKey(group['id']));
                      }).toList(),
                    ),
                    SizedBox(height: 16.h),
                  ],

                  // 两个按钮
                  Row(
                    children: [
                      // 创建新群组按钮
                      Expanded(
                        child: GestureDetector(
                          onTap: () async {
                            final result = await Get.toNamed('/create-group');
                            if (result == true) {
                              controller.loadGroupList(); // 刷新列表
                            }
                          },
                          child: Container(
                            height: 46.h,
                            decoration: BoxDecoration(
                              color: Color(0xffBEBEBE),
                              borderRadius: BorderRadius.circular(57.r),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  Icons.add,
                                  size: 18.sp,
                                  color: Colors.black,
                                ),
                                SizedBox(width: 4.w),
                                Text(
                                  '创建新群组',
                                  style: TextStyle(
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w500,
                                    color: Colors.black,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                      SizedBox(width: 12.w),
                      // 加入新群组按钮
                      Expanded(
                        child: GestureDetector(
                          onTap: () async {
                            final result = await Get.toNamed('/join-group');
                            if (result == true) {
                              controller.loadGroupList(); // 刷新列表
                            }
                          },
                          child: Container(
                            height: 46.h,
                            decoration: BoxDecoration(
                              color: Color(0xffBEBEBE),
                              borderRadius: BorderRadius.circular(57.r),
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  Icons.group_add,
                                  size: 18.sp,
                                  color: Colors.black,
                                ),
                                SizedBox(width: 4.w),
                                Text(
                                  '加入新群组',
                                  style: TextStyle(
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w500,
                                    color: Colors.black,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        );
      });
    }

    // 其他卡片保持原样
    return const SizedBox.shrink();
  }

  /// 简单的标题+图片区块
  Widget _buildSimpleSection(String title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标题
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.w),
          child: Text(
            title,
            style: TextStyle(
              fontSize: 18.sp,
              fontWeight: FontWeight.w600,
              color: Colors.white,
            ),
          ),
        ),
        SizedBox(height: 12.h),
        // notOpen 图片
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.w),
          child: GestureDetector(
            onTap: () {
              // 积分商城跳转到积分商城页面
              if (title == '积分商城') {
                Get.toNamed('/points-mall');
              } else {
                Toast.show('$title 功能即将推出');
              }
            },
            child: ClipRRect(
              borderRadius: BorderRadius.circular(12.r),
              child: Assets.profile.notOpen.image(
                width: double.infinity,
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    );
  }

  /// 群组卡片
  Widget _buildGroupCard(Map<String, dynamic> group, {Key? key}) {
    final memberList = group['memberResultList'] as List? ?? [];
    final syncedCount =
        memberList.where((m) => m['idSynchronize'] == '1').length;
    final totalCount = memberList.length;

    return GestureDetector(
      key: key,
      onTap: () async {
        // 跳转到群组详情页面
        final result = await Get.toNamed('/group-detail', arguments: {
          'groupId': group['id'],
          'groupName': group['groupName'],
          'groupCode': group['groupCode'],
        });
        
        // 如果返回true，说明群组有变化（解散或退出），刷新列表
        if (result == true) {
          controller.loadGroupList();
        }
      },
      child: Container(
        margin: EdgeInsets.only(bottom: 12.h),
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: const Color(0xFF282528),
          borderRadius: BorderRadius.circular(12.r),
        ),
        child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 群组名称和创建者
          Row(
            children: [
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      group['groupName'] ?? '未命名群组',
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.w600,
                        color: Colors.white,
                      ),
                    ),
                    const Spacer(),
                    Text(
                      '由${group['groupCreator'] ?? '未知'}创建',
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.grey[500],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          SizedBox(height: 12.h),
          // 成员头像列表
          Row(
            children: [
              ...memberList.take(3).map((member) {
                final avatar = member['memberAvatar'];
                final avatarUrl = avatar != null && avatar.toString().isNotEmpty
                    ? (avatar.toString().startsWith('http')
                        ? avatar
                        : 'https://api.azlg.com/prod-api$avatar')
                    : null;

                return Container(
                  margin: EdgeInsets.only(right: 8.w),
                  width: 32.w,
                  height: 32.w,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.grey[800],
                    image: avatarUrl != null
                        ? DecorationImage(
                            image: NetworkImage(avatarUrl),
                            fit: BoxFit.cover,
                          )
                        : null,
                  ),
                  child: avatarUrl == null
                      ? Icon(
                          Icons.person,
                          size: 16.sp,
                          color: Colors.grey[500],
                        )
                      : null,
                );
              }).toList(),
              if (memberList.length > 3)
                Container(
                  width: 32.w,
                  height: 32.w,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.grey[800],
                  ),
                  child: Center(
                    child: Text(
                      '${memberList.length - 3}+',
                      style: TextStyle(
                        fontSize: 10.sp,
                        color: Colors.grey[400],
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              const Spacer(),
              // 成员数量
              Row(
                children: [
                  Assets.profile.comments.image(width: 16.w, height: 16.h),
                  SizedBox(width: 4.w),
                  Text(
                    '$totalCount',
                    style: TextStyle(
                      fontSize: 12.sp,
                      color: Colors.grey[400],
                    ),
                  ),
                ],
              ),
            ],
          ),
          SizedBox(height: 12.h),
          // 同步进度条
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Expanded(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(4.r),
                      child: LinearProgressIndicator(
                        value: totalCount > 0 ? syncedCount / totalCount : 0,
                        backgroundColor: Colors.grey[800],
                        valueColor:
                            AlwaysStoppedAnimation<Color>(Colors.grey[600]!),
                        minHeight: 6.h,
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 6.h),
              Text(
                '今日数据同步人数  $syncedCount/$totalCount',
                style: TextStyle(
                  fontSize: 11.sp,
                  color: Colors.grey[600],
                ),
              ),
            ],
          ),
        ],
      ),
      ),
    );
  }
}


/// 充电动画图标 - 电池格子逐渐填充效果
class _ChargingBatteryIcon extends StatefulWidget {
  final int battery;
  final double size;

  const _ChargingBatteryIcon({
    required this.battery,
    required this.size,
  });

  @override
  State<_ChargingBatteryIcon> createState() => _ChargingBatteryIconState();
}

class _ChargingBatteryIconState extends State<_ChargingBatteryIcon>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<int> _batteryLevelAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    )..repeat();

    // 电池格子从 0 到 100 循环填充
    _batteryLevelAnimation = IntTween(begin: 0, end: 100).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  IconData _getBatteryIconByLevel(int level) {
    // 使用 Flutter 提供的电池充电图标
    if (level >= 90) return Icons.battery_charging_full;
    if (level >= 60) return Icons.battery_5_bar;
    if (level >= 40) return Icons.battery_4_bar;
    if (level >= 20) return Icons.battery_3_bar;
    if (level >= 10) return Icons.battery_2_bar;
    return Icons.battery_1_bar;
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _batteryLevelAnimation,
      builder: (context, child) {
        return Icon(
          _getBatteryIconByLevel(_batteryLevelAnimation.value),
          size: widget.size,
          color: Colors.green,
        );
      },
    );
  }
}
